<template>
  <!-- <div class="gaugeinfo"> -->
  <div ref="gaugechart" style="width: 400px; height:200px; text-align:center" class="echartbox"/>
  <!-- <p class="targetnum">Target:{{this.target_num}}</p> -->
  <!-- </div> -->
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入仪表图组件
require('echarts/lib/chart/gauge')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'Gauge',
  props: {
    textlink: {
      type: String,
      required: false,
      default: ''
    },
    gaugedata: {
      type: Object,
      default: function() { return [] }
    }
  },
  data() {
    return {
      link: this.textlink,
      maxnum: 0,
      target_num: 0,
      title: '',
      series_data: []
    }
  },
  // watch: {
  //   gaugedata(val) {
  //     this.maxnum = val.max
  //     this.target_num = val.target
  //     this.title = val.title
  //     this.series_data = val.data
  //     this.drawGauge()
  //   }
  // },
  mounted() {
    this.drawGauge()
  },
  methods: {
    drawGauge() {
      const myCharts = echarts.init(this.$refs.gaugechart)
      const maxnum = this.gaugedata.maxnum
      const target = this.gaugedata.target_num
      const rate = target / maxnum
      myCharts.setOption({
        color: [
          '#83d0d5',
          '#f1cb48',
          '#188ae2',
          '#E8830B',
          '#7460ae',
          '#fc4b6c',
          '#31ce77',
          '#eae0bc',
          '#e732cb',
          '#9dce8a'
        ],
        // tooltip: {
        //   formatter: '{a} <br/>{b} : {c}%'
        // },
        toolbox: {
          feature: {
            // restore: {},
            // saveAsImage: {}
          }
        },
        title: {
          text: this.title,
          left: '35',
          top: '20',
          link: this.link,
          textStyle: {
            color: '#B6B6B6'
          }
        },
        series: [
          {
            name: this.title,
            type: 'gauge',
            detail: {
              formatter: this.gaugedata.title,
              // formatter: function (value) {
              //   // return 'Actual : ' + value
              //   return this.gaugedata.title
              // },
              fontSize: '14',
              offsetCenter: [0, '25%']
            },
            center: ['50%', '68%'],
            radius: '100%',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: maxnum,
            splitNumber: 10,
            axisTick: {
              show: true
            },
            axisLine: {
              lineStyle: {
                color: [[rate, '#409EFF'], [1, '#e8e8e8']]
              }
            },
            splitLine: {
              lineStyle: {
                color: '#898D95',
                width: 1
              }
            },
            axisLabel: {
              color: '#BFC2C8',
              formatter: function(value) {
                // var median = maxnum / 2
                // var max = maxnum
                switch (value) {
                  // case 0:
                  //   return '0'
                  // // case median:
                  // //   return median
                  // case max:
                  //   return maxnum
                  case value:
                    return value
                }
              }
            },
            title: {
              show: false
            },
            data: [
              {
                value: target,
                name: 'Actual'
              }
            ]
            // data: this.series_data
          }
        ]
      })
    }
  }
}
</script>
